<template>
  <div class="sectionContent">
    <h2>{{sectionData.sectionName}}</h2>
    <div class="section" v-for="item in sectionData.courseLessons" :key="item.id">
      <span style="vertical-align: 1px;">{{item.theme}}</span>
      <van-icon v-if="item.canPlay" name="play-circle" @click="handleVideo(item)"/>
      <van-icon v-else name="lock" />
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant'
export default {
  name: 'sectionContent',
  components: {
    VanIcon: Icon
  },
  props: {
    sectionData: {
      type: Object
    }
  },
  data () {
    return {
      courseContent: {}
    }
  },
  methods: {
    handleVideo (item) {
      if (item.canPlay) {
        const id = item.id
        this.$router.push({ name: 'courseVideo', params: { id } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sectionContent{
  padding: 0 16px;
  .section{
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
  }
}
</style>
